import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_demo/Constants.dart';
import 'package:flutter_demo/home/home_soarch_page.dart';
import 'package:flutter_demo/pages/cash_register_page.dart';
import 'package:flutter_demo/pages/mine_page.dart';
import 'package:flutter_demo/pages/stock_page.dart';
import 'package:flutter_demo/pages/tmp.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

import 'bloc.dart';
import 'event.dart';
import 'state.dart';

class LoaginPage extends StatefulWidget {
  @override
  _LoaginPageState createState() => _LoaginPageState();
}

class _LoaginPageState extends State<LoaginPage> with SingleTickerProviderStateMixin {
  ///逻辑处理
  final bloc = LoaginBloc();

  ///菜单
  final List menus = [];

  ///帮助菜单
  final mapHelp = {
    "关于": Icons.info_outline,
    "帮助": Icons.help_outline,
    "问题反馈": Icons.add_comment,
  };

  int _currentIndex = 0;

  ///轮播图片
  List<Map> imageList = [
    {"url": "http://www.itying.com/images/flutter/1.png"},
    {"url": "http://www.itying.com/images/flutter/2.png"},
    {"url": "http://www.itying.com/images/flutter/3.png"},
    {"url": "http://www.itying.com/images/flutter/4.png"}
  ];

  List<Widget> _pageList = [
    CashRegisterPage(),
    MinePage(),
    StockPage(),
    TmpPage(),
  ];

  List<BottomNavigationBarItem> _barItem = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
    BottomNavigationBarItem(icon: Icon(Icons.credit_card_sharp), title: Text('收银')),
    BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('盘点')),
    BottomNavigationBarItem(icon: Icon(Icons.account_circle_outlined), title: Text('我的')),
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    fullScreenSetting();

    return BlocProvider(
      create: (BuildContext context) => bloc..add(InitEvent()),
      child: BlocBuilder<LoaginBloc, LoaginState>(
        builder: (context, state) {
          return Scaffold(
            resizeToAvoidBottomPadding: false, //输入框抵住键盘
            body: Container(
              decoration: BoxDecoration(color: Colors.black12),

              ///安全区
              child: SafeArea(
                child: Container(
                  child: Column(
                    children: [
                      _buildHeader(context),

                      ///轮播图
                      Container(
                        width: 380,
                        child: carousel(),
                      ),

                      Expanded(
                        child: _buildBottomTab(),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }

  ///轮播图
  Widget carousel() {
    return AspectRatio(
      // 配置宽高比
      aspectRatio: 16 / 9,
      child: Swiper(
        itemBuilder: (BuildContext context, int index) {
          // 配置图片地址
          return Card(
            shape: RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(10)),
            clipBehavior: Clip.antiAlias,
            child: Image.network(
              imageList[index]["url"],
              fit: BoxFit.fill,
            ),
            // child: Image.asset(
            //   imageList[index]["url"],
            //   fit: BoxFit.fill,
            // ),
          );
        },
        // 配置图片数量
        itemCount: imageList.length,
        // 底部分页器
        pagination: SwiperPagination(
          alignment: Alignment.bottomRight,
        ),
        // 左右箭头
        // control: new SwiperControl(),
        // 无限循环
        loop: true,
        // 自动轮播
        autoplay: true,
      ),
    );
  }

  ///构建标题栏
  Widget _buildHeader(BuildContext builder) {
    return Container(
      height: 70,
      decoration: BoxDecoration(color: Colors.white),
      child: Row(
        children: [
          Container(
            width: 50,
            child:
                // Icon(
                //   Icons.format_list_bulleted,
                //   size: 27,
                // )
                _buildMapHelp(),
          ),
          _buildSearch(context),
          Container(
              width: 60,
              child: Icon(
                Icons.add,
                size: 37,
              )),
        ],
      ),
    );
  }

  ///构建搜素框
  Widget _buildSearch(BuildContext builder) {
    return Container(
      height: 35,
      width: 280,
      child: Ink(
        child: InkWell(
            onTap: () {
              print("搜素");
              Navigator.push(context, MaterialPageRoute(builder: (context) => HomeSearchPage()));
            },
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                color: Constants.hexStringToColor("#F5F5F5"),
              ),
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                        child: Icon(Icons.search)),
                  ),
                ],
              ),
            )),
      ),
    );
  }

  ///底部Tab页
  Widget _buildBottomTab() {
    return Scaffold(
      body: this._pageList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: (int index) {
          setState(() {
            this._currentIndex = index;
          });
        },
        currentIndex: this._currentIndex,
        items: _barItem,
        iconSize: 25,
        fixedColor: Colors.green,
        selectedFontSize: 16,
        unselectedFontSize: 12,
        type: BottomNavigationBarType.fixed,
      ),
    );
  }

  ///顶部菜单
  Widget _buildMapHelp() {
    return PopupMenuButton<String>(
      itemBuilder: (context) => buildItems(),
      offset: Offset(0, 50),
      color: Color(0xffF4FFFA),
      elevation: 1,
      icon: Icon(Icons.format_list_bulleted),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
        topRight: Radius.circular(5),
        bottomLeft: Radius.circular(5),
      )),
      onSelected: (e) {
        print(e);
        if (e == '关于') {
          // DialogAbout.show(context);
        }
      },
      onCanceled: () => print('onCanceled'),
    );
  }

  List<PopupMenuItem<String>> buildItems() {
    return mapHelp.keys
        .toList()
        .map((e) => PopupMenuItem<String>(
            value: e,
            child: Wrap(
              spacing: 10,
              children: <Widget>[
                Icon(
                  mapHelp[e],
                  color: Colors.blue,
                ),
                Text(e),
              ],
            )))
        .toList();
  }
}
